<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>庄海鑫前端工程师简历</title>
    <link rel="stylesheet" href="index.css">
    <script src="//at.alicdn.com/t/font_1266175_iq85ixkg41.js"></script>
</head>
<body>
<header>
    <figure>
        <div class="avatar">
            <img src="avatar.png" alt="">
        </div>
        <figcaption>应聘前端工程师</figcaption>
    </figure>
</header>
<aside>
    <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-personal_information"></use>
            </svg>
        </span>
        <h2>基本信息</h2>
        <hr>
        <div class="detail">
            <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-name"></use>
            </svg>
            </span>庄海鑫
            </div>
            <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-age"></use>
            </svg>
            </span>22岁
            </div>
            <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-phone"></use>
            </svg>
            </span>13604903685
            </div>
            <div class="icon-list"><span class="iconfont"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weixin"></use>
            </svg></span>zhxzuishuai0515
            </div>
            <div class="icon-list"><span class="iconfont"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-email"></use>
            </svg></span>649308293@qq.com
            </div>
        </div>
    </section>
    <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhuye"></use>
            </svg>
        </span>
        <h2>社交主页</h2>
        <hr>
        <div class="detail">
            <div class="icon-list"><a href="https://github.com/zhuanghaixin"><span class="iconfont"><svg class="icon"
                                                                                                         aria-hidden="true">
                <use xlink:href="#icon-github"></use>
            </svg></span>Github</a>
            </div>
            <div class="icon-list"><a href="https://www.yuque.com/zhuanghaixin"><span class="iconfont"><svg class="icon"
                                                                                                            aria-hidden="true">
                <use xlink:href="#icon-yuque"></use>
            </svg></span>语雀</a>
            </div>
            <div class="icon-list"><a href="https://zhuanghaixin.cn/"><span class="iconfont"><svg class="icon"
                                                                                                  aria-hidden="true">
                <use xlink:href="#icon-website"></use>
            </svg></span>网站</a>
            </div>
            <div class="icon-list"><a href="https://www.jianshu.com/u/8e88e609ebe8"><span class="iconfont"><svg
                    class="icon" aria-hidden="true">
                <use xlink:href="#icon-CN_jianshu"></use>
            </svg></span>简书</a>
            </div>
        </div>
    </section>
    <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-technology"></use>
            </svg>
        </span>
        <h2>掌握技能</h2>
        <hr>
        <div class="detail">
            <ul>
                <li>掌握HTML5/CSS3，熟悉传统布局、Flex布局、Grid布局、移动端适配等</li>
                <li>JavaScript 基础掌握良好，例如 this、闭包、原型链、作用域等基本概念。</li>
                <li>熟悉Vue技术栈如Vue-Router、Vuex、Vue-CLI及相关流行库的使用，理解其重要概念,能够编写简单的 Vue.js 基础组件。</li>
                <li>掌握常用的 Git 命令</li>
                <li>能够使用 ESlint 规范自己的代码风格，使用有意义的变量名以及意义明确的代码，提高代码的可读性</li>
            </ul>
        </div>
    </section>
    <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jineng"></use>
            </svg>
        </span>
        <h2>技能图谱</h2>
        <hr>
        <div class="detail">
            <dl class="skill-bar">
                <dt>HTML5&CSS3</dt>
                <dd>
                    <div class="html"></div>
                </dd>
                <dt>JavaScript</dt>
                <dd>
                    <div class="js"></div>
                </dd>

                <dt>Vue.js</dt>
                <dd>
                    <div class="vue"></div>
                </dd>
                <dt>Node</dt>
                <dd>
                    <div class="node"></div>
                </dd>
                <dt>React.js</dt>
                <dd>
                    <div class="react"></div>
                </dd>
                <dt>小程序</dt>
                <dd>
                    <div class="xiaochengxu"></div>
                </dd>
            </dl>
        </div>
    </section>
    <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hobby"></use>
            </svg>
        </span>
        <h2>兴趣爱好</h2>
        <hr>
        <div class="detail">
            <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-changge"></use>
            </svg>
            </span>唱歌
            </div>
            <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-huihua"></use>
            </svg>
            </span>画画
            </div>
            <div class="icon-list"><span class="iconfont">
                <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jita"></use>
            </svg>
            </span>吉他
            </div>
            <div class="icon-list"><span class="iconfont"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jianji"></use>
            </svg></span>剪辑
            </div>
        </div>
    </section>
</aside>
<main>
    <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-school_experience"></use>
            </svg>
        </span>
        <h2>教育经历</h2>
        <hr>
        <div class="detail">
            <div class="timeline-panel">
                <div class="date">09/2012~06/2015</div>
                <h3>沈阳市第二十七中学</h3>
                <p class="intro"></p>
                <div class="detail">
                </div>
            </div>
            <div class="timeline-panel">
                <div class="date">09/2015~07/2019</div>
                <h3>沈阳化工大学</h3>
                <p class="intro">软件工程</p>
                <div class="detail">
                    <ul>
                        <li>辽宁省计算机设计大赛二等奖---《舒乘网》</li>
                        <li>辽宁省大学生创新创业计划--《舒乘网》</li>
                        <li>英语四级：472</li>
                        <li>二次二等院级奖学金,两次三等院级奖学金</li>
                        <li>院级文艺活动展出(唱歌）</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-project"></use>
            </svg>
        </span>
        <h2>项目经历</h2>
        <hr>
        <div class="detail">
            <div class="timeline-panel">
                <!--                <div class="date">04/2019~05/2019</div>-->
                <h3>Vue仿小米商城</h3>
                <div class="detail">
                    <ul>
                        <li><b>项目介绍</b>：项目使用vue.js进行开发，目前已经完成基本的交互与页面。包括登录页面、商城首页、产品介绍、添加购物车、订单提交等。
                            </p>
                        </li>
                        <li><b>项目职责</b>：
                            <br> 1. 还原小米商城前端页面，采用vue官方规范进行代码编写，可读性更强。
                            <br> 2. 抽取设计图中的公共部分，进而完成各种页面，简化代码。开发各种功能组件，导航、底部、服务条、产品参数、加载、弹框、分页器等组件等。使用Vue-cli4 作为脚手架工具
                            <br> 3. 项目中的动画、过渡使用css3与vue提供的transition组件制作。
                            <br> 4. 先使用easy-mock进行模拟数据，然后与后台接口进行对接。
                        </li>
                        <li><b>技术栈</b>： Vue.js+Vue-router+Vuex+Webpack+Axios+Sass+Element</li>
                        <!--                        <li><b>项目成果</b>：</li>-->
                        <!--                        <li><b>项目地址</b>：</li>-->
                        <li><b>项目地址</b>：<a
                                href="https://github.com/zhuanghaixin/xiaomi-mall-pc-demo">https://github.com/zhuanghaixin/xiaomi-mall-pc-demo</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="timeline-panel">
                <!--                <div class="date">04/2019~05/2019</div>-->
                <h3>基于Vue的UI组件库的设计与实现</h3>
                <div class="detail">
                    <ul>
                        <li><b>项目介绍</b>：
                            该项目的是参考目前流行的前端UI组件库Ant Design,iView进而设计的一款属于自己的组件库，实现了常有组件类型，基础组件，布局组件，导航组件，表单组件，视图组件
                        </li>
                        <li><b>项目职责</b>：
                            <br> 1. 提供日常开发任务的常用组件, 使用Vue-cli3 作为脚手架工具
                            <br> 2. 提供了 Button Icon Input Grid Layout Tabs ... 等常用组件, 适合移动端和 PC 端使用
                            <br> 3. 代码易读, api设置简单, 易于上手, 可以通过commits来查看源码
                            <br> 4.该项目还在进行中，并持续更新，希望可以完成更多的 UI 组件, 为他人工作带来方便
                        </li>
                        <li><b>技术栈</b>：Vue.js+Vue-cli3+ES6+Parcel+Karma、</li>
                        <!--                        <li><b>项目成果</b>：</li>-->
                        <!--                        <li><b>项目地址</b>：</li>-->
                        <li><b>项目地址</b>：<a
                                href="https://github.com/zhuanghaixin/hisen">https://github.com/zhuanghaixin/hisen</a>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="timeline-panel">
                <!--                <div class="date">03/2019~04/2019</div>-->
                <h3>Canvas画版</h3>
                <div class="detail">
                    <ul>
                        <li><b>项目介绍</b>：一个canvas画版
                        </li>
                        <li><b>项目职责</b>：
                            <br> 1. 使用Canvas作为画布，监听mouse,touch事件,以及canvas的moveTo(),lineTo(0,stroke()实现画笔，橡皮擦功能
                            <br> 2. 实现了切换画笔，橡皮擦功能
                            <br> 3. 实现下载，清空画布的功能
                        </li>
                        <li><b>技术栈</b>：HTML+CSS+avaScript+Canvas</li>
                        <li><b>项目地址</b>： <a href="https://github.com/zhuanghaixin/Canvas-drawing-board">https://github.com/zhuanghaixin/Canvas-drawing-board</a>
                        </li>
                        <li><b>项目预览</b>： <a href="https://zhuanghaixin.github.io/Canvas-drawing-board/canvas-drawing-board/index.html">https://zhuanghaixin.github.io/Canvas-drawing-board/canvas-drawing-board/index.html</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="timeline-panel">
                <!--                <div class="date">03/2019~04/2019</div>-->
                <h3>vue-admin-dashboard</h3>
                <div class="detail">
                    <ul>
                        <li><b>项目介绍</b>：该项目使用Vue全家桶实现仪表盘系统,包括注册，登录，主题换色，面板，图表等功能

                        </li>
                        <li><b>项目职责</b>：
                            <br> 1. 使用Netlify实现登录，注册页面，熟悉了登录注册流程。
                            <br> 2. 运用了flex布局实现响应式页面，CSS3实现各种页面交互效果
                            <br> 3. 用sass实现主题换色，用vuex管理主题状态，符合现在网站流行趋势
                        </li>
                        <li><b>技术栈</b>：Vue.js+Vue-Router+Vuex+Sass+Netlify</li>
                        <!--                    <li><b>项目成果</b>：</li>-->
                        <li><b>项目地址</b>：
                            <a href="https://github.com/zhuanghaixin/vue-admin-dashboard">https://github.com/zhuanghaixin/vue-admin-dashboard</a>
                        </li>
                        <li><b>项目预览</b>：
                            <a href="https://zhuanghaixin-vue-admin-dashboard.netlify.com/">https://zhuanghaixin-vue-admin-dashboard.netlify.com</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="timeline-panel">
                <!--                <div class="date">04/2018~05/2018</div>-->
                <h3>移动端网易云音乐播放器</h3>
                <div class="detail">
                    <ul>
                        <li><b>项目介绍</b>：
                            该项目移动端播放、PC端后台管理，移动端歌曲播放、切换、暂停、搜索、循环等功能，PC端歌曲上传、删除、修改等功能。
                        </li>
                        <li><b>项目职责</b>：
                            <br> 1. 还原移动端网易云音乐页面。
                            <br> 2. 代码更可读性高,运用了flex布局,盒模型,BFC,CSS3等技术
                            <br> 3. 使用jquery+leanCloud来模拟后台真实数据,使用HTML5和CSS3写了播放页面磁头动画和黑胶旋转的动画,使其还原度更高。
                        </li>
                        <li><b>技术栈</b>：HTML5+CSS3+jQuery+MVC+LeanCloud+七牛云</li>
                        <!--                        <li><b>项目成果</b>：</li>-->
                        <li><b>项目地址</b>： <a href="https://github.com/zhuanghaixin/Music">https://github.com/zhuanghaixin/Music</a>
                        </li>
                        <li><b>项目预览</b>： <a
                                href="https://zhuanghaixin.github.io/Music/src/index.html">https://zhuanghaixin.github.io/Music/src/index.html</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="timeline-panel">
                <!--                <div class="date">03/2019~04/2019</div>-->
                <h3>其他项目</h3>
                <div class="detail">
                    <ul>
                        <li><b>会动的简历</b>:
                            <br><b>项目地址</b>： <a href="https://github.com/zhuanghaixin/moving-resume">https://github.com/zhuanghaixin/moving-resume</a>
                            <br><b>项目预览</b>： <a href="https://zhuanghaixin.github.io/moving-resume/">https://zhuanghaixin.github.io/moving-resume</a>
                        </li>
                        <li><b>简历介绍页</b>:
                            <br><b>项目地址</b>： <a href="https://github.com/zhuanghaixin/Cool-resume">https://github.com/zhuanghaixin/Cool-resume</a>
                            <br><b>项目预览</b>： <a href="https://zhuanghaixin.github.io/Cool-resume/src/">https://zhuanghaixin.github.io/Cool-resume/src</a>
                        </li>
                        <li><b>皮卡丘动画</b>:
                            <br><b>项目地址</b>： <a href="https://github.com/zhuanghaixin/Pikaqu">https://github.com/zhuanghaixin/Music</a>
                            <br><b>项目预览</b>： <a href="https://zhuanghaixin.github.io/Pikaqu/">https://zhuanghaixin.github.io/Pikaqu</a>
                        </li>
                        <li><b>书签</b>:
                            <br><b>项目地址</b>： <a href="https://github.com/zhuanghaixin/myBookmarks">https://github.com/zhuanghaixin/myBookmarks</a>
                            <br><b>项目预览</b>： <a href="https://zhuanghaixin.github.io/myBookmarks/">https://zhuanghaixin.github.io/myBookmarks</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <section>
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-self-evaluation"></use>
            </svg>
        </span>
        <h2>个人评价</h2>
        <hr>
        <div class="detail">
            <li>对前端有着浓厚的兴趣，喜欢网页界面设计，关注产品的用户体验。平常会逛dribble,codepen,webflow这些设计交互感很强的前端网站。</li>
            <li>每天学习英语二十分钟以上，我深知英语对前端的重要性，不论是对新技术的学习还是技术的深挖.会看medium，udemy，youtube等国外技术博客、视频。使用Google,stackoverflow解决前端常见的问题</li>
            <li>经常写笔记,博客总结自己所学。在语雀，简书平结学到的东西。 善用Xmind进行需求分析，总结学到的知识。</li>
            <li>未来三年规划，希望自己可以成长为独当一面的前端工程师</li>

        </div>
        </div>
    </section>
    <section class="section_print">
        <span class="iconfont">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-print"></use>
            </svg>
        </span>
        <h2>打印简历</h2>
        <hr>
        <div class="detail_print">
            <div class="print"><a href="javascript:window.print()">打印PDF简历</a></div>
        </div>
    </section>
</main>

</body>
</html>
